<!--
 * @Author: 熊志伟 xiongzhiwei
 * @Date: 2024-11-12 09:14:40
 * @LastEditors: 宋绍华
 * @LastEditTime: 2025-01-10 17:22:19
 * @FilePath: \sr_system_manager_ui\src\components\FilePreviewMultiple\index.vue
 * @Description: 多个文件预览
-->
<script setup lang="ts">
import icon_doc from '@/assets/images/icon_doc.webp'
import icon_excel from '@/assets/images/icon_excel.webp'
import icon_pdf from '@/assets/images/icon_pdf.webp'
import icon_txt from '@/assets/images/icon_txt.webp'
import icon_img from '@/assets/images/icon_img.webp'
import icon_file from '@/assets/images/icon_file.webp'
import { ArrowLeft, ArrowRight, Download, FullScreen } from '@element-plus/icons-vue'

const props = defineProps<{
  fileList: any
}>()
const emits = defineEmits(['onRendered', 'onError'])
const { proxy } = getCurrentInstance()

const filePreviewRef = ref(null)
const currentIndex = ref(0)
const currentFile = computed(() => {
  return props.fileList[currentIndex.value]
})

const type = computed(() => {
  const url = currentFile.value?.url?.toLowerCase()
  if (url?.includes('.doc') || url?.includes('.docx')) return 'doc'
  if (url?.includes('.xls') || url?.includes('.xlsx')) return 'xls'
  if (url?.includes('.jpg') || url?.includes('.jpeg') || url?.includes('.png')) return 'image'
  if (url?.includes('.pdf')) return 'pdf'
  if (url?.includes('.txt')) return 'txt'
  return ''
})

// 缩略图标
const thumbnail = computed(() => {
  if (type.value === 'doc') return icon_doc
  if (type.value === 'xls') return icon_excel
  if (type.value === 'image') return icon_img
  if (type.value === 'pdf') return icon_pdf
  if (type.value === 'txt') return icon_txt
  return icon_file
})


function handlePrev() {
  if (currentIndex.value <= 0) {
    currentIndex.value = 0
    return
  }
  currentIndex.value--
}

function handleNext() {
  if (currentIndex.value >= props.fileList?.length) {
    currentIndex.value = props.fileList?.length - 1
    return
  }
  currentIndex.value++
}

function handleDownload() {
  proxy.$download.downloadFileSync(currentFile.value?.url, currentFile.value?.name)
}

function toggleFullScreen() {
  if (document.fullscreenElement) { // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  } else { // 进入全屏
    if (filePreviewRef.value?.requestFullscreen) {
      filePreviewRef.value?.requestFullscreen()
    } else if (filePreviewRef.value?.webkitRequestFullScreen) {
      filePreviewRef.value?.webkitRequestFullScreen()
    } else if (filePreviewRef.value?.mozRequestFullScreen) {
      filePreviewRef.value?.mozRequestFullScreen()
    } else if (filePreviewRef.value?.msRequestFullscreen) {
      // IE11
      filePreviewRef.value?.msRequestFullscreen()
    }
  }
}

function onRendered() {
  emits('onRendered')
}

function onError() {
  emits('onError')
}

</script>

<template>
  <div class="preview-wrapper" ref="filePreviewRef">
    <template v-if="props.fileList.length">
      <div class="preview-header">
      <div class="flex items-center">
        <el-image :src="thumbnail" lazy loading="lazy" fit="cover"
          class="w-[16px] h-[16px] mr-[6px] flex-none"></el-image>
        <div class="file-name">{{ currentFile?.name }}</div>
      </div>
      <div class="flex items-center ">
        <div class="flex items-center mr-13px" @click.stop="handlePrev">
          <el-button type="primary" text :icon="ArrowLeft" :disabled="currentIndex === 0" />
          <el-button class="ml-[-11px]!" type="primary" link :disabled="currentIndex === 0">上一个</el-button>
        </div>
        <div class="flex items-center "  @click.stop="handleNext">
          <el-button class="mr-[-23px]!  z-2!" type="primary" link  :disabled="currentIndex === props.fileList.length - 1">下一个</el-button>
          <el-button type="primary" text :icon="ArrowRight"
          :disabled="currentIndex === props.fileList.length - 1" />
        </div>
        <div class="flex items-center ml-[-10px]!" @click="handleDownload">
          <el-button type="primary" text :icon="Download"  />
          <el-button class="ml-[-10px]!" type="primary" link >下载</el-button>
        </div>
        <div class="flex items-center"  @click="toggleFullScreen">
          <el-button type="primary" text :icon="FullScreen" />
          <el-button class="ml-[-10px]!" type="primary" link >窗口打开</el-button>
        </div>
      </div>
    </div>
    <div class="pt-[24px] bg-[#F2F3F5] flex-1">
      <FilePreview :src="currentFile?.url" @onError="onError" @onRendered="onRendered"/>
    </div>
    </template>
    <template v-else>
      <el-empty description="暂无文件" />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.preview-wrapper {
  @apply w-full h-full rd-[4px] overflow-auto flex flex-col;

  .preview-header {
    @apply flex items-center justify-between bg-[#F7F8FA] px-[16px] py-[19px];
    border-bottom: 1px solid #E5E6EB;
  }

  .file-name {
    @apply mr-[16px] text-[#1D2129] text-[14px];
  }
}
</style>